<template>
	<view>
		<!-- 顶部导航栏 -->
		<navBar title="搜索页"></navBar>

		<!-- 瀑布流展示 -->
		<u-waterfall v-model="list" ref="waterfall" class="waterfall" v-if="list.length">
			<template v-slot:left="{leftList}">
				<view class="blog-item" v-for="(item, index) in leftList" :key="index">
					<image :src="item.cover" mode="widthFix"></image>
					<view class="blog-title">{{item.title}}</view>
					<view class="blog-author">{{item.userName}}</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="blog-item" v-for="(item, index) in rightList" :key="index">
					<image :src="item.cover" mode="widthFix"></image>
					<view class="blog-title">{{item.title}}</view>
					<view class="blog-author">{{item.userName}}</view>
				</view>
			</template>
		</u-waterfall>

		<u-empty mode="search" v-else class="empty"></u-empty>
	</view>
</template>

<script>
	import {
		getBlogByKeywords
	} from '@/config/api.js'

	export default {
		data() {
			return {
				list: []
			};
		},
		onLoad(options) {
			this.search(options.keyword)
		},
		methods: {
			async search(keyword) {
				const blogs = await getBlogByKeywords(keyword)
				this.list = blogs.data
			}
		}
	}
</script>

<style lang="scss">
	.waterfall {
		padding: 20px 10px;

		.blog-item {
			width: 95%;
			margin: 0 auto;
			margin-bottom: 12px;
			padding: 10px;
			border: 0.5px solid #c8c7cc;
			border-radius: 8px;
			box-sizing: border-box;
			box-shadow: rgba(242, 174, 39, 0.3) 0 3px 8px;
			background-color: #fff;

			.blog-author {
				margin-top: 5px;
				font-size: 14px;
			}

			image {
				width: 100%;
				border-radius: 8px;
			}
		}
	}

	.empty {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(1.3);
	}
</style>
